<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="welcome-banner">
          <h1>欢迎来到在线学习平台</h1>
          <p>随时随地学习，提升自我能力</p>
          <div class="action-buttons">
            <el-button 
              v-if="!isAuthenticated" 
              type="primary" 
              size="large" 
              @click="$router.push('/login')"
            >
              立即登录
            </el-button>
            <el-button 
              v-if="!isAuthenticated" 
              type="success" 
              size="large" 
              @click="$router.push('/register')"
            >
              免费注册
            </el-button>
            <el-button 
              v-if="isAuthenticated" 
              type="primary" 
              size="large"
              @click="$router.push('/profile')"
            >
              个人中心
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="feature-section">
      <el-col :xs="24" :sm="8">
        <el-card class="feature-card">
          <template #header>
            <div class="feature-header">
              <i class="el-icon-reading"></i>
              <h3>丰富课程资源</h3>
            </div>
          </template>
          <div class="feature-content">
            <p>提供各类学习资源，覆盖多个学科领域，满足不同学习需求。</p>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="8">
        <el-card class="feature-card">
          <template #header>
            <div class="feature-header">
              <i class="el-icon-data-line"></i>
              <h3>学习进度跟踪</h3>
            </div>
          </template>
          <div class="feature-content">
            <p>自动记录学习进度，实时统计学习数据，科学规划学习计划。</p>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="8">
        <el-card class="feature-card">
          <template #header>
            <div class="feature-header">
              <i class="el-icon-medal"></i>
              <h3>成绩证书管理</h3>
            </div>
          </template>
          <div class="feature-content">
            <p>完成课程后获取证书，支持证书在线查询验证，提升学习价值。</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row class="personal-section">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="personal-header">
              <h2>个人学习空间</h2>
            </div>
          </template>
          <div class="personal-content">
            <p>这是一个专为个人学习打造的在线平台，您可以根据自己的兴趣和学习计划自由选择课程。</p>
            <div class="platform-features">
              <el-tag effect="dark" type="primary" class="feature-tag">自主学习</el-tag>
              <el-tag effect="dark" type="success" class="feature-tag">个性化体验</el-tag>
              <el-tag effect="dark" type="warning" class="feature-tag">知识沉淀</el-tag>
              <el-tag effect="dark" type="danger" class="feature-tag">技能提升</el-tag>
              <el-tag effect="dark" type="info" class="feature-tag">创意探索</el-tag>
            </div>
            <div class="platform-quote">
              <i class="el-icon-collection-tag quote-icon"></i>
              <p class="quote-text">"知识改变命运，学习成就未来"</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'HomePage',
  setup() {
    const store = useStore()
    const isAuthenticated = computed(() => store.getters.isAuthenticated)
    
    return {
      isAuthenticated
    }
  }
}
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.welcome-banner {
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  color: #fff;
  padding: 60px 30px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 30px;
}

.welcome-banner h1 {
  font-size: 36px;
  margin-bottom: 15px;
}

.welcome-banner p {
  font-size: 18px;
  margin-bottom: 30px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.feature-section {
  margin-bottom: 30px;
}

.feature-card {
  height: 100%;
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.feature-header i {
  font-size: 36px;
  margin-bottom: 10px;
  color: #409EFF;
}

.feature-header h3 {
  margin: 0;
  font-size: 18px;
}

.feature-content {
  text-align: center;
}

.personal-section {
  margin-bottom: 30px;
}

.personal-header {
  text-align: center;
}

.personal-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.platform-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 25px 0;
}

.feature-tag {
  padding: 8px 16px;
  font-size: 14px;
}

.platform-quote {
  margin-top: 25px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.quote-icon {
  font-size: 32px;
  color: #409EFF;
  margin-bottom: 10px;
}

.quote-text {
  font-size: 18px;
  font-style: italic;
  color: #606266;
  margin: 0;
}

@media (max-width: 768px) {
  .feature-card {
    margin-bottom: 20px;
  }
  
  .welcome-banner h1 {
    font-size: 28px;
  }
  
  .welcome-banner p {
    font-size: 16px;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .action-buttons .el-button {
    width: 80%;
    margin-bottom: 10px;
  }
  
  .feature-tag {
    margin-bottom: 10px;
  }
}
</style> 